﻿<div id="libraryReportManagerPage" data-role="page" class="page type-interior reportsPage pluginConfigurationPage" data-title="Reports" data-controller="__plugin/reportsjs">
    <style>
        /* "page" containers - full-screen views, one should always be in view post-pageload */
        .ui-mobile [data-role=dialog] {
            top: 0;
            left: 0;
            width: 100%;
            min-height: 100%;
            position: absolute;
            border: 0;
        }

        /* preset breakpoint to switch to stacked grid styles below 35em (560px) */
        @media (max-width: 35em) {

            .ui-responsive>.ui-block-a,
            .ui-responsive>.ui-block-b,
            .ui-responsive>.ui-block-c,
            .ui-responsive>.ui-block-d,
            .ui-responsive>.ui-block-e {
                width: 100%;
                float: none;
            }
        }

        /* Panel */
        .ui-panel {
            width: 17em;
            min-height: 100%;
            max-height: none;
            border-width: 0;
            position: absolute;
            top: 0;
            display: block;
        }

        .ui-panel-closed {
            width: 0;
            max-height: 100%;
            overflow: hidden;
            visibility: hidden;
            left: 0;
            clip: rect(1px, 1px, 1px, 1px);
        }

        .ui-panel-fixed {
            position: fixed;
            bottom: -1px;
            /* Fixes gap on Chrome for Android */
            padding-bottom: 1px;
        }

        .ui-panel-display-reveal {
            z-index: 1;
        }

        .ui-panel-display-push {
            z-index: 999;
        }

        .ui-panel-display-overlay {
            z-index: 1001;
            /* Fixed toolbars have z-index 1000 */
        }

        .ui-panel-inner {
            padding: 1em;
        }

        /* Container, page and wrapper */
        .ui-panel-page-container {
            overflow-x: visible;
        }

        .ui-panel-wrapper {
            position: relative;
            min-height: inherit;
            border: 0;
            overflow-x: hidden;
            z-index: 999;
        }

        /* Fixed toolbars */
        .ui-panel-fixed-toolbar {
            overflow-x: hidden;
        }

        /* Dismiss */
        .ui-panel-dismiss {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 100%;
            z-index: 1002;
            display: none;
        }

        .ui-panel-dismiss-open {
            display: block;
        }

        /* Animate class is added to panel, wrapper and fixed toolbars */
        .ui-panel-animate {
            -webkit-transition: -webkit-transform 300ms ease;
            -webkit-transition-duration: 300ms;
            -moz-transition: -moz-transform 300ms ease;
            transition: transform 300ms ease;
        }

        /* Fix for Windows Phone issue #6349: unset the transition for transforms in case of fixed toolbars. */
        @media screen and (max-device-width: 768px) {

            .ui-page-header-fixed .ui-panel-animate.ui-panel-wrapper,
            .ui-page-footer-fixed .ui-panel-animate.ui-panel-wrapper,
            .ui-panel-animate.ui-panel-fixed-toolbar {
                -ms-transition: none;
            }

            /* We need a transitionend event ... */
            .ui-panel-animate.ui-panel-fixed-toolbar {
                -ms-transition: -ms-transform 1ms;
                -ms-transform: rotate(0deg);
            }
        }

        /* Hardware acceleration for smoother transitions on WebKit browsers */
        .ui-panel-animate.ui-panel:not(.ui-panel-display-reveal) {
            -webkit-backface-visibility: hidden;
            -webkit-transform: translate3d(0, 0, 0);
        }

        /* Panel positioning (for overlay and push) */
        /* Panel left closed */
        .ui-panel-position-left {
            left: -17em;
        }

        /* Panel left closed animated */
        .ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay,
        .ui-panel-animate.ui-panel-position-left.ui-panel-display-push {
            left: 0;
            -webkit-transform: translate3d(-17em, 0, 0);
            -moz-transform: translate3d(-17em, 0, 0);
            transform: translate3d(-17em, 0, 0);
        }

        /* Panel left open */
        .ui-panel-position-left.ui-panel-display-reveal,
        /* Unset "panel left closed" for reveal */
        .ui-panel-open.ui-panel-position-left {
            left: 0;
        }

        /* Panel left open animated */
        .ui-panel-animate.ui-panel-open.ui-panel-position-left.ui-panel-display-overlay,
        .ui-panel-animate.ui-panel-open.ui-panel-position-left.ui-panel-display-push {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            -moz-transform: none;
        }

        /* Panel right closed */
        .ui-panel-position-right {
            right: -17em;
        }

        /* Panel right closed animated */
        .ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay,
        .ui-panel-animate.ui-panel-position-right.ui-panel-display-push {
            right: 0;
            -webkit-transform: translate3d(17em, 0, 0);
            -moz-transform: translate3d(17em, 0, 0);
            transform: translate3d(17em, 0, 0);
        }

        /* Panel right open */
        .ui-panel-position-right.ui-panel-display-reveal,
        /* Unset "panel right closed" for reveal */
        .ui-panel-position-right.ui-panel-open {
            right: 0;
        }

        /* Panel right open animated */
        .ui-panel-animate.ui-panel-open.ui-panel-position-right.ui-panel-display-overlay,
        .ui-panel-animate.ui-panel-open.ui-panel-position-right.ui-panel-display-push {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            -moz-transform: none;
        }

        /* Wrapper and fixed toolbars positioning (for reveal and push) */
        /* Panel left open */
        .ui-panel-page-content-position-left {
            left: 17em;
            right: -17em;
        }

        /* Panel left open animated */
        .ui-panel-animate.ui-panel-page-content-position-left {
            left: 0;
            right: 0;
            -webkit-transform: translate3d(17em, 0, 0);
            -moz-transform: translate3d(17em, 0, 0);
            transform: translate3d(17em, 0, 0);
        }

        /* Panel right open */
        .ui-panel-page-content-position-right {
            left: -17em;
            right: 17em;
        }

        /* Panel right open animated */
        .ui-panel-animate.ui-panel-page-content-position-right {
            left: 0;
            right: 0;
            -webkit-transform: translate3d(-17em, 0, 0);
            -moz-transform: translate3d(-17em, 0, 0);
            transform: translate3d(-17em, 0, 0);
        }

        /* Dismiss model open */
        .ui-panel-dismiss-open.ui-panel-dismiss-position-left {
            left: 17em;
        }

        .ui-panel-dismiss-open.ui-panel-dismiss-position-right {
            right: 17em;
        }

        /* Export options flex box */
        .exportFlexbox {
            display: flex;
            column-gap: 0.5em;
        }

        .emby-button.block.exportOption {
            width: 0;
            flex-grow: 1;
            padding: 0.9em 0;
        }

        /* Shadows and borders */
        .ui-panel-display-reveal {
            -webkit-box-shadow: inset -5px 0 5px rgba(0, 0, 0, .15);
            -moz-box-shadow: inset -5px 0 5px rgba(0, 0, 0, .15);
            box-shadow: inset -5px 0 5px rgba(0, 0, 0, .15);
        }

        .ui-panel-position-right.ui-panel-display-reveal {
            -webkit-box-shadow: inset 5px 0 5px rgba(0, 0, 0, .15);
            -moz-box-shadow: inset 5px 0 5px rgba(0, 0, 0, .15);
            box-shadow: inset 5px 0 5px rgba(0, 0, 0, .15);
        }

        .ui-panel-display-overlay {
            -webkit-box-shadow: 5px 0 5px rgba(0, 0, 0, .15);
            -moz-box-shadow: 5px 0 5px rgba(0, 0, 0, .15);
            box-shadow: 5px 0 5px rgba(0, 0, 0, .15);
        }

        .ui-panel-position-right.ui-panel-display-overlay {
            -webkit-box-shadow: -5px 0 5px rgba(0, 0, 0, .15);
            -moz-box-shadow: -5px 0 5px rgba(0, 0, 0, .15);
            box-shadow: -5px 0 5px rgba(0, 0, 0, .15);
        }

        .ui-panel-open.ui-panel-position-left.ui-panel-display-push {
            border-right-width: 1px;
            margin-right: -1px;
        }

        .ui-panel-page-content-position-left.ui-panel-page-content-display-push {
            margin-left: 1px;
            width: auto;
        }

        .ui-panel-open.ui-panel-position-right.ui-panel-display-push {
            border-left-width: 1px;
            margin-left: -1px;
        }

        .ui-panel-page-content-position-right.ui-panel-page-content-display-push {
            margin-right: 1px;
            width: auto;
        }

        /* Responsive: wrap on wide viewports once open */
        @media (min-width:55em) {
            .ui-responsive-panel .ui-panel-page-content-open.ui-panel-page-content-position-left {
                margin-right: 17em;
            }

            .ui-responsive-panel .ui-panel-page-content-open.ui-panel-page-content-position-right {
                margin-left: 17em;
            }

            .ui-responsive-panel .ui-panel-page-content-open {
                width: auto;
            }

            .ui-responsive-panel .ui-panel-dismiss-display-push,
            .ui-responsive-panel.ui-page-active~.ui-panel-dismiss-display-push {
                display: none;
            }
        }

        /* Page and overlay */
        .reportsPage .ui-panel-wrapper {
            background-color: #252525
            /*{b-page-background-color}*/
            ;
            border-color: #454545
            /*{b-page-border}*/
            ;
            color: #fff
            /*{b-page-color}*/
            ;
        }

        /* Fixes the issue of jqm panels altering the page background. */
        .ui-panel-content-wrap {
            background: none !important;
        }

        .ui-panel fieldset+fieldset {
            margin-top: 2em;
        }

        .ui-panel .ui-panel-inner {
            overflow: auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            -webkit-overflow-scrolling: touch;
        }

        .reporContainer {
            overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;
        }

        .tblLibraryReport img {
            height: 18px;
            margin-right: 10px;
        }

        .tblLibraryReport .md-icon {
            font-size: 1.2em;
        }

    </style>
    <div class="content-primary">
        <div style="text-align: center;">
            <div class="viewControls">
                <div class="selectContainer selectContainer-inline">
                    <select is="emby-select" label="Report:" id="selectViewType">
                        <option value="ReportData">Media</option>
                        <option value="ReportActivities">Activity</option>
                    </select>
                </div>
                <div class="selectContainer selectContainer-inline" id="selectIncludeItemTypesBox">
                    <select is="emby-select" id="selectIncludeItemTypes" label="Mediatype:" name="selectIncludeItemTypes">
                        <option value="MusicAlbum">Albums</option>
                        <option value="MusicArtist">Artists</option>
                        <option value="Book">Books</option>
                        <option value="BoxSet">Collections</option>
                        <option value="Episode">Episodes</option>
                        <option value="Video">Home videos</option>
                        <option value="Movie">Movies</option>
                        <option value="MusicVideo">Music videos</option>
                        <option value="Trailer">Trailers</option>
                        <option value="Season">Seasons</option>
                        <option value="Series">Series</option>
                        <option value="Audio">Songs</option>
                    </select>
                </div>
                <button is="paper-icon-button-light" class="btnPanelOpen autoSize" tabindex="-1">
                    <span class="material-icons more_vert"></span>
                </button>
            </div>
            <div class="paging"></div>
        </div>

        <div class="reporContainer" style="height:auto"></div>

        <div class="paging" style="text-align: center;"></div>

        <div data-role="panel" id="viewPanel" class="viewPanel ui-panel ui-panel-position-right ui-panel-display-overlay ui-body-inherit ui-panel-animate dialog ui-panel-closed ui-panel-fixed" data-position="right" data-display="overlay" data-position-fixed="true">
            <div class="ui-panel-inner">
                <form>
                    <div class="viewPanelTabs">
                        <button is="paper-icon-button-light" class="btnPanelClose autoSize" tabindex="-1">
                            <span class="material-icons close"></span>
                        </button>
                        <button is="emby-button" type="button" id="tabView" data-role="button" class="raised viewTabButton ui-btn-active" data-tab="tabView">View</button>
                        <button is="emby-button" type="button" id="tabFilter" data-role="button" class="raised viewTabButton" data-tab="tabFilter">Filter</button>
                    </div>
                    <br>
                    <div class="tabView viewTab" id="tabViewBox">
                        <h2>Settings</h2>
                        <div class="selectContainer" id="selectReportGroupingBox">
                            <select is="emby-select" id="selectReportGroup" label="Grouping:"></select>
                        </div>
                        <label class="checkboxContainer">
                            <input is="emby-checkbox" type="checkbox" id="chkStartCollapsed" />
                            <span>Start Collapsed</span>
                        </label>
                        <div class="selectContainer" id="selectPageSizeBox">
                            <select is="emby-select" id="selectPageSize" label="Page size:" class="selectPageSize">
                                <option value="20">20</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                                <option value="200">200</option>
                                <option value="300">300</option>
                                <option value="500">500</option>
                                <option value="-1">All</option>
                            </select>
                        </div>
                        <div id="exportReportBox">
                            <fieldset>
                                <label>Export</label><br>
                                <div class="exportFlexbox">
                                    <button is="emby-button" type="button" class="raised block exportOption" name="btnReportExportExcel" id="btnReportExportExcel" data-icon="arrow-d">Excel</button>
                                    <button is="emby-button" type="button" class="raised block exportOption" name="btnReportExportHtml" id="btnReportExportHtml" data-icon="arrow-d">HTML</button>
                                    <button is="emby-button" type="button" class="raised block exportOption" name="btnReportExportCsv" id="btnReportExportCsv" data-icon="arrow-d">CSV</button>
                                </div>
                            </fieldset>
                        </div>
                        <div data-role="collapsible" data-collapsed="true" class="reportsColumns" id="grpReportsColumns">
                            <h2>Columns</h2>
                            <button type="button" class="raised block" is="emby-button" name="btnResetReportColumns" id="btnResetReportColumns" data-icon="refresh">Reset</button>
                            <div class="filterOptions"></div>
                        </div>
                    </div>
                    <div class="tabFilter viewTab hide" id="tabFilterBox">
                        <h2>Filters</h2>
                        <div>
                            <input class="chkStandardFilter" type="checkbox" name="chkPlayed" id="chkPlayed" data-filter="IsPlayed">
                            <label for="chkPlayed">Played</label>
                            <br />
                            <input class="chkStandardFilter" type="checkbox" name="chkUnplayed" id="chkUnplayed" data-filter="IsUnPlayed">
                            <label for="chkUnplayed">Unplayed</label>
                            <br />
                            <input class="chkStandardFilter" type="checkbox" name="chkResumable" id="chkResumable" data-filter="IsResumable">
                            <label for="chkResumable">Resumable</label>
                            <br />
                            <input class="chkStandardFilter" type="checkbox" name="chkLikes" id="chkLikes" data-filter="Likes">
                            <label for="chkLikes">Likes</label>
                            <br />
                            <input class="chkStandardFilter" type="checkbox" name="chkDislikes" id="chkDislikes" data-filter="Dislikes">
                            <label for="chkDislikes">Dislikes</label>
                            <br />
                            <input class="chkIsFavorite" type="checkbox" name="chkFavorite" id="chkIsFavorite" data-filter="IsFavorite">
                            <label for="chkIsFavorite">Favorite</label>
                            <br />
                            <input class="chkIsNotFavorite" type="checkbox" name="chkNotFavorite" id="chkIsNotFavorite" data-filter="IsNotFavorite">
                            <label for="chkIsNotFavorite">Not Favorite</label>
                            <br />
                        </div>
                        <div data-role="collapsible" data-collapsed="true" data-mini="true">
                            <h2>Management</h2>
                            <div>
                                <input class="chkIsLocked" type="checkbox" id="chkIsLocked">
                                <label for="chkIsLocked">Locked</label>
                                <br />
                                <input class="chkMissingOverview" type="checkbox" name="chkMissingOverview" id="chkMissingOverview">
                                <label for="chkMissingOverview">Missing Overview</label>
                                <br />
                                <input class="chkMissingRating" type="checkbox" name="chkMissingRating" id="chkMissingRating">
                                <label for="chkMissingRating">Missing parental rating</label>
                                <br />
                                <input class="chkMissingImdbId" type="checkbox" name="chkMissingImdbId" id="chkMissingImdbId">
                                <label for="chkMissingImdbId">Missing Imdb id</label>
                                <br />
                                <input class="chkMissingTmdbId" type="checkbox" name="chkMissingTmdbId" id="chkMissingTmdbId">
                                <label for="chkMissingTmdbId">Missing MovieDb id</label>
                                <br />
                                <input class="chkMissingTvdbId" type="checkbox" name="chkMissingTvdbId" id="chkMissingTvdbId">
                                <label for="chkMissingTvdbId">Missing Tvdb id</label>
                                <br />
                            </div>
                        </div>
                        <div data-role="collapsible" data-collapsed="true" data-mini="true" id="GroupStatus">
                            <h2>Status</h2>
                            <div>
                                <input class="chkStatus" type="checkbox" name="chkStatusContinuing" id="chkStatusContinuing" data-filter="Continuing">
                                <label for="chkStatusContinuing">Continuing</label><br />
                                <input class="chkStatus" type="checkbox" name="chkStatusEnded" id="chkStatusEnded" data-filter="Ended">
                                <label for="chkStatusEnded">Ended</label><br />
                            </div>
                        </div>
                        <div data-role="collapsible" data-collapsed="true" data-mini="true" id="GroupAirDays">
                            <h2>Air Days</h2>
                            <div>
                                <input class="chkAirDays" type="checkbox" name="chkSunday" id="chkSunday" data-filter="Sunday">
                                <label for="chkSunday">Sunday</label>
                                <br />
                                <input class="chkAirDays" type="checkbox" name="chkMonday" id="chkMonday" data-filter="Monday">
                                <label for="chkMonday">Monday</label>
                                <br />
                                <input class="chkAirDays" type="checkbox" name="chkTuesday" id="chkTuesday" data-filter="Tuesday">
                                <label for="chkTuesday">Tuesday</label>
                                <br />
                                <input class="chkAirDays" type="checkbox" name="chkWednesday" id="chkWednesday" data-filter="Wednesday">
                                <label for="chkWednesday">Wednesday</label>
                                <br />
                                <input class="chkAirDays" type="checkbox" name="chkThursday" id="chkThursday" data-filter="Thursday">
                                <label for="chkThursday">Thursday</label>
                                <br />
                                <input class="chkAirDays" type="checkbox" name="chkFriday" id="chkFriday" data-filter="Friday">
                                <label for="chkFriday">Friday</label>
                                <br />
                                <input class="chkAirDays" type="checkbox" name="chkSaturday" id="chkSaturday" data-filter="Saturday">
                                <label for="chkSaturday">Saturday</label>
                                <br />
                            </div>
                        </div>
                        <div data-role="collapsible" data-collapsed="true" data-mini="true" id="GroupEpisodes">
                            <h2>Episodes</h2>
                            <div>
                                <input type="checkbox" name="chkSpecialEpisode" id="chkSpecialEpisode">
                                <label for="chkSpecialEpisode">Specials</label>
                                <br />
                                <input type="checkbox" name="chkMissingEpisode" id="chkMissingEpisode">
                                <label for="chkMissingEpisode">Missing episodes</label>
                                <br />
                                <input type="checkbox" name="chkFutureEpisode" id="chkFutureEpisode">
                                <label for="chkFutureEpisode">Future episodes</label>
                                <br />
                            </div>
                        </div>
                        <div data-role="collapsible" data-collapsed="true" data-mini="true">
                            <h2>Features</h2>
                            <div>
                                <input class="chkFeatureFilter" type="checkbox" name="chkSubtitle" id="chkSubtitle">
                                <label for="chkSubtitle">Subtitles</label>
                                <br />
                                <input class="chkFeatureFilter" type="checkbox" name="chkTrailer" id="chkTrailer">
                                <label for="chkTrailer">Trailer</label>
                                <br />
                                <input class="chkFeatureFilter" type="checkbox" name="chkMissingTrailer" id="chkMissingTrailer">
                                <label for="chkMissingTrailer">No Trailer</label>
                                <br />
                                <input class="chkFeatureFilter" type="checkbox" name="chkSpecialFeature" id="chkSpecialFeature">
                                <label for="chkSpecialFeature">Extras</label>
                                <br />
                                <input class="chkFeatureFilter" type="checkbox" name="chkThemeSong" id="chkThemeSong">
                                <label for="chkThemeSong">Theme Song</label>
                                <br />
                                <input class="chkFeatureFilter" type="checkbox" name="chkThemeVideo" id="chkThemeVideo">
                                <label for="chkThemeVideo">Theme Video</label>
                                <br />
                            </div>
                        </div>
                        <div data-role="collapsible" data-collapsed="true" data-mini="true" class="genreFilters">
                            <h2>Genres</h2>
                            <div class="filterOptions"></div>
                        </div>
                        <div data-role="collapsible" data-collapsed="true" data-mini="true" class="officialRatingFilters">
                            <h2>Parental Ratings</h2>
                            <div class="filterOptions"></div>
                        </div>
                        <div data-role="collapsible" data-collapsed="true" data-mini="true" class="tagFilters">
                            <h2>Tags</h2>
                            <div class="filterOptions">
                            </div>
                        </div>
                        <div data-role="collapsible" data-collapsed="true" data-mini="true">
                            <h2>Video Types</h2>
                            <div>
                                <input class="chkVideoTypeFilter" type="checkbox" name="chkBluray" id="chkBluray" data-filter="Bluray">
                                <label for="chkBluray">Blu-ray</label>
                                <br />
                                <input class="chkVideoTypeFilter" type="checkbox" name="chkDvd" id="chkDvd" data-filter="Dvd">
                                <label for="chkDvd">DVD</label>
                                <br />
                                <input class="chkVideoTypeFilter" type="checkbox" name="chkIso" id="chkIso" data-filter="Iso">
                                <label for="chkIso">ISO</label>
                                <br />
                                <input class="chkHDFilter" type="checkbox" name="chkHD" id="chkHD" data-filter="IsHD">
                                <label for="chkHD">HD</label>
                                <br />
                                <input class="chkSDFilter" type="checkbox" name="chkSD" id="chkSD" data-filter="IsHD">
                                <label for="chkSD">SD</label>
                                <br />
                                <input class="chk3DFilter" type="checkbox" name="chk3D" id="chk3D" data-filter="Digital3D,Sbs3D">
                                <label for="chk3D">3D</label>
                                <br />
                            </div>
                        </div>
                        <div data-role="collapsible" data-collapsed="true" data-mini="true" class="yearFilters">
                            <h2>Years</h2>
                            <div class="filterOptions"></div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
